<!-- head -->
{include file='public/head' /}
<!-- head -->

<!-- left -->
{include file='public/left' /}
<!-- left -->

<div class="content-wrapper">
    <section class="content-header">
        <h1>
            员工分析
            <small>全部员工</small>
        </h1>
        <ol class="breadcrumb">
            <li><a href="#"><i class="fa fa-dashboard"></i> 员工管理</a></li>
            <li class="active">员工分析</li>
        </ol>
    </section>

    <section class="content">
        <div class="row">
            <div class="col-sm-12">
                <div class="box box-primary">
                    <div class="box-header with-border">
                        <h3 class="box-title" style="font-size: 14px;">共计条记录</h3>
                        <div class="box-tools pull-right">
                            <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                            </button>
                            <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                        </div>
                    </div>
                    <div class="box-body">
                        <div class="table-responsive">
                            <table class="table table-bordered table-striped">
                                <form id='iform' action="{:url('Staff/StaffEcharts')}" method="get">
                                    <div class="input-group">
                                        <select name="year" class="form-control select">
                                            {for start="2016" end="$years"}
                                            {if condition="$i eq $year"}
                                            <option value="{$i}" selected="selected">{$i}年</option> 
                                            {else /}
                                            <option value="{$i}">{$i}年</option> 
                                            {/if}
                                            {/for}
                                        </select> 
                                        <span class="input-group-btn">
                                            <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-calendar"></i>
                                            </button>
                                        </span>
                                    </div>
                                </form>

                            </table>
                        </div>
                    </div>
                    <center><div id="main" style="width: 95%;height:400px;"></div></center>
                </div>
            </div>

        </div>
    </section>
</div>

<script type="text/javascript" src='__STATIC__/Echarts/jquery-1.8.1.min.js'></script>
<script type="text/javascript" src='__STATIC__/Echarts/echarts.js'></script>
<script type="text/javascript" src='http://echarts.baidu.com/build/dist/echarts.js'></script>
<script type="text/javascript">
    // 路径配置
    require.config({
    paths: {
    echarts: 'http://echarts.baidu.com/build/dist'
            //echarts: 'http://127.0.0.1/php-sh-v300/public/static/Echarts'
    }
    });
    // 使用
    require(
    [
            'echarts',
            'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
            'echarts/chart/line' // 使用柱状图就加载bar模块，按需加载
    ],
            function loaddata(ec) {
            // 基于准备好的dom，初始化echarts图表
            var myChart = ec.init(document.getElementById('main'));
            var month = "{$month}";
            month = month.split(',');
            option = {
            title: {
            text: '克克美员工量数据分析',
                    subtext: '数据展示'
            },
                    tooltip: {
                    trigger: 'axis'
                    },
                    legend: {
                    data: ['员工量（总）', '员工量（男）', '员工量（女）']
                    },
                    toolbox: {
                    show: true,
                            feature: {
                            mark: {show: false},
                                    dataView: {show: false, readOnly: false},
                                    magicType: {show: true, type: ['line', 'bar']},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                            }
                    },
                    calculable: true,
                    xAxis: [
                    {
                    type: 'category',
                            data: month
                    }
                    ],
                    yAxis: [
                    {
                    type: 'value'
                    }
                    ],
                    series: [
                    {
                    name: '员工量（总）',
                            type: 'bar',
                            data: [{$staffData}],
                            markPoint: {
                            data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                            ]
                            },
                            markLine: {
                            data: [
                            {type: 'average', name: '平均值'}
                            ]
                            }
                    },
                    {
                    name: '员工量（女）',
                            type: 'bar',
                            data: [{$staffData2}],
                            markPoint: {
                            data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                            ]
                            },
                            markLine: {
                            data: [
                            {type: 'average', name: '平均值'}
                            ]
                            }
                    },
                    {
                    name: '员工量（男）',
                            type: 'bar',
                            data: [{$staffData1}],
                            markPoint: {
                            data: [
                            {type: 'max', name: '最大值'},
                            {type: 'min', name: '最小值'}
                            ]
                            },
                            markLine: {
                            data: [
                            {type: 'average', name: '平均值'}
                            ]
                            }
                    },
                    ]
            };
            // 为echarts对象加载数据 
            myChart.setOption(option);
            }
    );
</script>

<!-- foot -->
{include file='public/foot' /}
<!-- foot -->